<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <!-- 引入bootstarp -->
    <script type="text/javascript" src="../js/bootstrap3/js/bootstrap.js"></script>
    <link rel="stylesheet" href="../js/bootstrap3/css/bootstrap.css">
    <!-- 引入bootstrap table的css、js -->
    <link type="text/css" rel="stylesheet" href="../js/bootstrap-table/bootstrap-table.css">
    <script type="text/javascript" src="../js/bootstrap-table/bootstrap-table.js"></script>
    <script type="text/javascript" src="../js/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
    <!-- 引入bootstrap datetime的css、js -->
    <link type="text/css" rel="stylesheet" href="../js/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css">
    <script type="text/javascript" src="../js/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"></script>
    <script type="text/javascript" src="../js/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>

    <script src="../js/bootstrap-bootbox/bootbox.all.min.js"></script>
    <script src="../js/bootstrap-fileinput/js/fileinput.js"></script>
    <script src="../js/bootstrap-fileinput/js/locales/zh.js"></script>
    <link rel="stylesheet" href="../js/bootstrap-fileinput/css/fileinput.css">


</head>
<body>
<div id="toolbar">
</div>
<table border="2" class="table" id="bookTable" style="background: #1cbcd8"></table>
</body>
<script>
    $(function(){
        initGeRenTable();
    })

    function editBookDialog(id){
        bootbox.dialog({
            title:'<i class="glyphicon glyphicon-book"></i>修改图书',
            message:loadPage('../page/updateu'),
            size:'large',
            buttons:{
                cancel:{
                    label: "取消",
                    className: 'btn-danger',
                    callback: function(){
                    }
                },
                ok:{
                    label: "保存",
                    className: 'btn-info',
                    callback: function(){
                        saveUser();
                    }
                }
            }
        })

        //获取回显数据
        $.post('../wjs/findUser',{id:id},function(data){
            $("#id").val(data.id);
            $("#userName").val(data.userName);
            $("#userAge").val(data.userAge);
            $("#userAccount").val(data.userAccount);
            $("#hideImg").val(data.userImg);
            //回显图片上传插件
            initFileInput(data.userImg == null ? '' : data.userImg);
        })
    }
    function saveUser(){
        $.ajax({
            url:'../wjs/updateuser',
            type:'post',
            data:$("#bookForm").serialize(),
            dataType:'json',
            success:function(data){
                if (data) {
                    /*$('#bookTable').bootstrapTable('refresh');*/
                    location.href="../page/geren";
                }else{
                    bootbox.alert({
                        message: "保存失败",
                        size: 'small'
                    });
                }
            }
        })
    }
    function loadPage(url){
        var res = '';
        $.ajax({
            url:url,
            async:false,
            success:function(data){
                res = data;
            }
        });
        return res;
    }

    //
    function searchBook(){
        $("#bookTable").bootstrapTable('refresh',{
            query:{
                page:'1',
            }
        });
    }

    function initGeRenTable(){
        $("#bookTable").bootstrapTable({
            toolbar:'#toolbar',
            url:'../wjs/findgeren',
            /*method:'post',
            contentType:'application/x-www-form-urlencoded',//post请求按照表单方式
            pagination:true,*/
            pageSize:5,
            pageList:[2,5,6],
            pageNumber:1,
            clickToSelect: true,         //是否启用点击选中行
            sidePagination:'server',        //分页方式：client客户端分页，server服务端分页
            striped:true,          //斑马线
            queryParams:function(){
                return {
                    page:this.pageNumber,
                    rows:this.pageSize
                };
            },
            columns:[
                {field:'userName',title:'用户名',width : 200},
                {field:'userSex',title:'性别',width : 200,formatter:function(value,row,index){
                        if(value == 1){
                            return "男";
                        }else{
                            return "女";
                        }
                    }},
                {field:'userAge',title:'年龄',width : 200},
                {field:'userDate',title:'用户创建日期',width : 200},
                {field:'userImg',title:'用户头像',width : 200,formatter:function (value,row,index){
                        return '<img src="'+value+'" width="50px" height="50px">'
                    }},
                {field:'userAccount',title:'登录名',width : 200},
                {field:'xx',title:'操作',width : 200,formatter:function(value,row,index){
                        return '<a href="javascript:editBookDialog('+row.id+');">修改</a>'
                    }}
            ]
        })
    }
    $('.date').datetimepicker({
        language: 'zh-CN',//显示中文
        format: 'yyyy-mm-dd hh:ii:ss',//显示格式
        minView: "month",//设置只显示到月份
        initialDate: new Date(),//初始化当前日期
        autoclose: true,//选中自动关闭
        todayBtn: true//显示今日按钮
    });


</script>
</html>